<template>
	<view class="uni-margin-wrap">
		<swiper 
			class="swiper" 
			circular 
			:indicator-dots="false" 
			:interval="interval"
			:duration="200"
			:vertical="true"
			:easing-function="easeOutCubic"
			:current="activeVedioIndex"
			@change="changeSwiper"
		>
			<swiper-item  v-for="(item, index) in mediaList" :key="index" @longpress="longPress()">
				<view class="swiper-item uni-bg-red">
					<!-- 视频、图片 -->
					<view class="video_play_box" :class="[isHidePingLun ? 'c_height_100' : '', isShowPingLun ? 'c_height_40' : '']">
						<!-- if item.content.type = 'video' -->
						<video
							v-if="item.content.type == 'video'"
							class="myVideo"
							:id="item.id +''+ index" 
							:loop="true"
							:controls="false"
							:http-cache="true"
							:page-gesture="false"
							:show-fullscreen-btn="false"
							:show-loading="false"
							:show-center-play-btn="false"
							:enable-progress-gesture="false"
							:src="item.content.mediaList[0].url"
							@click="handleClickSwiper(index)"
						></video>
						
						<!-- if item.content.type = 'image' -->
						<view class="img_swiper_box" v-else-if="item.content.type == 'image'" @click="handleClickSwiper(index)">
							<swiper
								class="image_swiper" 
								indicator-dots="true"
								indicator-color="#ccc"
								indicator-active-color="#1c9aa0"
								:autoplay="currentSwiperIndex == index"
								:duration="300"
								@change="changeImageSwiper"
							>
								<swiper-item v-for="(image, index2) in item.content.mediaList" :key="index2">
									<image :class="[isShowPingLun ? 'img_type_1' : 'img_type_2']" :src="image.url" mode=""></image>
								</swiper-item>
							</swiper>
						</view>

						<view class="" v-else>
							加载中
						</view>
						
						<!-- 暂停播放 icon -->
						<i v-show="isPause" class="pause_icon iconfont icon-icon_play color_fff fs_60_i" @click="handleClickSwiper(index)"></i>

					</view>
					
					<!-- 左侧 用户信息、商品信息 -->
					<view class="vedio_left_box" v-show="!isShowPingLun">
						<view class="user_box">
							<!-- <view class="name mn fs_36_i color_fff">{{ item.publishUser.nickname || 'ᠬᠡᠷᠡᠭᠯᠡᠭᠴᠢ' }}᠂  {{ formatCreateTime(item.createTime) }} </view> -->
							<!-- <view class="mai_niu mn color_fff">ᠦᠬᠡᠷ ᠬᠤᠳᠠᠯᠳᠤᠬᠤ</view> -->
							<view class="mai_niu mn fs_36_i color_fff"># {{ item.title }}</view> 
							<view class="addr mn fs_36_i color_fff">{{ productData.breedingType.label || '---- ᠦᠬᠡᠷ' }} | {{ item.address }}</view>
						</view>
						
						<!-- product 数据 -->
						<!-- <view class="pro_info_box">
							<view class="pro_info">
								<view class="image_box">
									<image :src="productData.imageList[0].url" mode=""></image>
								</view>
																	
								<view class="info_box">
									<text class="category fs_36_i mn">{{ productData.breedingType.label }}</text>
									<text class="price__data mn">
										<text class="price fs_36_i">￥{{ productData.price || '-----' }}/ᠨᠢᠭᠡ </text> 
										{{ '' + item.blogStat.starNum }} ᠬᠥᠮᠦᠨ ᠰᠠᠨᠠᠭ᠎ᠠ᠎ᠲᠠᠢ 
									</text>
								</view>
							</view>
						</view> -->
					</view>
				
					<!-- 右侧 用户头像、点赞、评论、收藏、转发 -->
					<view class="vedio_right_box" v-show="!isShowPingLun">
						<view class="avatar_box">
							<image :src="IMG_URL + item.publishUser.avatar" mode="" @click="goToUserVideoList(item.publishUser)"></image>
							<!-- 已关注状态 -->
							<i
								class="yi_guan_zhu_icon iconfont icon-31yiguanzhudianpu color_fff bgc_orange fs_32_i border_radius_50p"
								 v-if="isFollwToUser"
								@click="unFollowUser(item.publishUser.id)">
							</i>
							
							<!-- 未关注状态 -->
							<i
								class="guan_zhu_icon iconfont icon-tianjiadise color_orange bgc_fff fs_32_i border_radius_50p" 
								v-else
								@click="followUser(item.publishUser.id)">
							</i>
						</view>
						
						<view class="menu">
							<!-- 点赞 -->
							<view class="item_box">
								<view class="item_icon_box" @click="handleClickDianZan(index)">
									<i v-if="item.userConf.like == 1" class="iconfont icon-yidianzan color_ff194e fs_68_i"></i>
									<i v-else class="iconfont icon-yidianzan color_eee fs_68_i"></i>
								</view>
								<text class="item_value">{{ item.blogStat.likeNum }}</text>
							</view>
							
							<!-- 评论 -->
							<view class="item_box">
								<view class="item_icon_box" @click="handleClickPingLun(index)"> 
									<i class="iconfont icon-pinglun1 color_eee fs_56_i"></i>
								</view>
								<text class="item_value">{{ item.blogStat.commentNum }}</text>
							</view>
							
							<!-- 收藏 -->
							<view class="item_box">
								<view class="item_icon_box" @click="handleClickShouCang(index)">
									<i v-if="item.userConf.star == 1" class="iconfont icon-shoucangxiao color_orange fs_56_i"></i>
									<i v-else class="iconfont icon-shoucangxiao color_eee fs_56_i"></i>
								</view>
								<text class="item_value">{{ item.blogStat.starNum }}</text>
							</view>
							
							<!-- 转发 -->
							<view class="item_box">
								<view class="item_icon_box" @click="handleClickZhuanFa(index)" >
									<button class="share_btn" open-type="share" @ShareAppMessage="onShareAppMessage()">
										<i class="iconfont icon-zhuanfa color_eee" ></i>
									</button>
									<text class="item_value visit_num">{{ item.blogStat.visitNum }}</text>
								</view>
							</view>
						</view>
					</view>
				
					<!-- 评论信息 -->
					<view class="ping_lun_box" v-show="isShowPingLun">						
						<view class="ping_lun_total">
							<text class="ping_lun_count">{{ commentList.length }} 条评论</text>
							
							<!-- 隐藏 icon -->
							<i class="hide_icon iconfont icon-xiala1 mainColor fs_68_i" @click="hidePingLun()"></i>
						</view>
						
						<scroll-view 
							:scroll-top="scrollTop" 
							scroll-y="true" 
							class="scroll-Y"
							:show-scrollbar="false"
							@scrolltolower="scrollToLower"
						>
							<view class="ping_lun_item" v-for="(pingLunItem, index2) in commentList" :key="index2">
								<view class="ping_lun_avatar_box" @click="handleClickPingLunAvatar(index2)">
									<image :src="IMG_URL + pingLunItem.user.avatar || ping_lun_def_avatar" mode=""></image>
								</view>
								
								<view class="ping_lun_info">
									<span class="ping_lun_name">{{ pingLunItem.user.nickname || '----' }}</span>
									<span class="ping_lun_time">{{ pingLunItem.createTime }}</span>
									
									<view class="ping_lun_content" @click="handleClickCommentItem(index2)">
										{{ pingLunItem.content }}
									</view>
								</view>
								
								<!-- 点赞评论 icon -->
								<!-- <view class="ping_lun_dian_zan_box">
									<i class="iconfont icon-yidianzan color_ccc fs_40_i"></i>
								</view> -->
								
								<!-- 删除评论 icon -->
							 <!--	<view class="ping_lun_del_box">
									<i class="iconfont icon-lajitong mainColor fs_36_i" @click="deleteComment(commentList[index2].id)"></i>
								</view> -->
								
							</view>
						</scroll-view>
						
						<!-- 提交评论 -->
						<view class="sub_ping_lun">
							<view class="input_ping_lun">
								<input type="text" v-model="commentText" :placeholder="commentInputPlaceholder">
							</view>
							
							<view class="sub_btn" @click="submitComment(index)">
								<i class="iconfont icon-fasong mainColor fs_52_i"></i>
							</view>
						</view>
					</view>
				
					<!-- 保存视频 窗口 -->
					<view 
						class="button_view_box animate__animated" 
						:class="[ isShowButtonView ? 'animate__fadeInUpBig' : 'animate__bounceInUp' ]"
						v-show="isShowButtonView" 
					>
						<!-- title -->
						<view class="w_full h_50 lh_50 text_center">
							<span class="fs_32 fw_600">保存文件</span>
						</view>
					
						<view class="button_view w_fll flex_row" v-if="mediaList[index].content.type == 'video'">
							<span class="fs_30">保存视频</span> 
							<i class="iconfont icon-download1_fill mainColor fs_40_i"  @click="downLoadVideo(index)"></i>
						</view>
						
						<view class="button_view" v-if="mediaList[index].content.type == 'image'">
							<view class="w_full flex_row">
								<span class="fs_30"> 保存当前图片</span>
								<i class="iconfont icon-download1_fill mainColor fs_40_i"  @click="downLoadCurrentImage(index)"></i>
							</view>
							<view class="w_full flex_row mt_20">
								<span class="fs_30">保存所有图片</span> 
								<i class="iconfont icon-download1_fill mainColor fs_40_i"  @click="downLoadAllImage(index)"></i>
							</view>
						</view>
						
						<view class="" v-if="isDownLoading">
							<view class="mh_20">
								<span class="fs_30">下载进度 : </span>
								<span class="mainColor">{{ ' ' + downLoadObj.progress }} %</span> 
							</view>
							
							<view class="mainColor">
								{{ downLoadObj.totalBytesWritten }} / {{ downLoadObj.totalBytesExpectedToWrite }}
							</view>
						</view>
					</view>
				</view>	
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import getSystemInfo from '@/mixins/basic.js'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	
	export default {
		mixins: [getSystemInfo],
		
		data() {
			return {
				currentSwiperIndex: 0,
				
				loading: true,
				player: null,
				audio: null,
				isPause: false,
				
				activeVedioIndex: 0,
				activeImageIndex: 0,
				imgIndex: 0,
				
				mediaList: [],
				productId: '',
				productData: {},
				
				isShowPingLun: false,
				isHidePingLun: false,
				pingLunPlayer: false,
				commentInputPlaceholder: '请输入评论内容',
				submitType: 'addCommment',
				replyCommentIndex: 0,
				
				isFollwToUser: false,
				
				currentVedioUrl: '',
				currentPingLunList: [],
				ping_lun_def_avatar: require('@/static/img/tabbar/me.png'),
				isPausePingLunVideo: false,
				
				isShowButtonView: false,
				isDownLoading: false,
				
				downLoadObj: {
					progress: 0,
					totalBytesWritten: 0,
					totalBytesExpectedToWrite: 0
				},
				
				dianZan: false,
				pingLun: false,
				shouCang: false,
				zhuanFa: false,
				
				user: {},
				commentText: '',
				
				pagenation: {
					current: 1,
					size: 10
				},
				mediaTotal: 0
			};
		},
		
		mounted() {
			this.user = uni.getStorageSync('user')
			
			uni.$on("playVideo", () => {
				// 修正暂停键的显示与隐藏
				this.isPause = false

				if (this.mediaList[this.activeVedioIndex].content.type == 'video') {
					// 继续播放视频
					let id = this.mediaList[this.activeVedioIndex].id +''+ this.activeVedioIndex
					this.player = uni.createVideoContext(id, this)
					this.player.play()
				} else if (this.mediaList[this.activeVedioIndex].content.type == 'image') {
					this.audio.src = this.mediaList[0].content.bgAudio || ''
					// 继续播放背景音乐
					if (this.audio && this.audio.src) {
						this.audio.play()
					}
				}
				
				this.isShowPingLun = false
				this.isHidePingLun = true
			})
			
			uni.$on("stopVideo", () => {
				// console.log(this.isPause)
				// 修正暂停键的显示与隐藏
				this.isPause = true
			
				// 暂停视频
				let id = this.mediaList[this.activeVedioIndex].id +''+ this.activeVedioIndex
				this.player = uni.createVideoContext(id, this)
				this.player.stop()
				
				// 暂停背景音乐
				if (this.audio && this.audio.src) {
					this.audio.pause()
				}
				
				this.isShowPingLun = false
				this.isHidePingLun = true
			})
			
			// 获取媒体 list
			if (!this.mediaList.length) {
				this.pagenation.current = 1
				this.getMediaList()
			}
		},
		
		methods: {
			// 获取视频数据
			getMediaList() {
				let that = this
				
				let params = {
					current: this.pagenation.current,
					size: this.pagenation.size
				}
				
				NET.request(API.getMediaList, params, 'GET')
				.then(res => {
					if (res.code === 200) {
						that.mediaList = [...this.mediaList, ...res.data]
						that.mediaTotal = res.total
						
						// 如果是第一次打开轮播视频页面
						if (params.current == 1) {
							let id = this.mediaList[0].id +''+ this.activeVedioIndex
							this.player = uni.createVideoContext(id, this)
							this.player.play()
						}
						
						if (this.getStorageToken()) {
							// 判断 是否关注 第一个 视频的作者
							this.judgeFollow(0)
						}
					}
				})
				.catch(err => {
					uni.showToast({
						title: '获取失败！',
						icon: 'error'
					})
				})
			},
			
			// 监听 swiper 滑动
			async changeSwiper(e) {
				this.currentSwiperIndex = e.detail.current
				let index = e.detail.current
				this.activeVedioIndex = index
				
				// 暂停上一个视频 或 背景音乐
				this.player.pause()
				if (this.audio && this.audio.src) {
					this.audio.destroy()
				}
				
				// 隐藏评论
				this.isShowPingLun = false
				this.isHidePingLun = true
				this.isPause = false

				// 获取当前作品的 点赞数量、评论数量、收藏数量、转发数量
				// this.getCurrentMediaLikeNum()
				// this.getCurrentMediaCommentNum()
				// this.getCurrentMediaStarNum()
				// this.getCurrentMediaShareNum()
				
				// 播放视频 或 图片
				if (this.mediaList[index].content.type == 'video') {
					// 播放视频
					let id = this.mediaList[this.activeVedioIndex].id +''+ index
					this.player = uni.createVideoContext(id, this)
					setTimeout(() => {
						this.player.play()
					}, 100)
					
				} else if (this.mediaList[index].content.type == 'image') {
					this.audio = uni.createInnerAudioContext();
					this.audio.autoplay = true;
					this.audio.loop = true;
					this.audio.src = this.mediaList[index].content.bgAudio;
				} else {
					uni.showToast({
						title: '未知 类！',
						icon: 'error'
					})		
				}
				
				// 判断 用户登录 状态, 如果用户已登录 -> 进行关注查询
				if (this.getStorageToken()) {
					this.judgeFollow(index)		// 关注查询
				}
				
				// 分页			
				if (index == this.mediaList.length - 1) {
					if (this.mediaList.length < this.mediaTotal) {
						this.pagenation.current ++
						this.getMediaList()
					} else {
						uni.showToast({
							title: '数据到底了！',
							icon: 'none'
						})
					}
				} 
			},
			
			// 获取当前作品的点赞数量
			getCurrentMediaLikeNum(index) {
				let mediaId = this.mediaList[index].id
				// NET.request(API.getxxxxx, {id: mediaId}, "GET")
				// .then(res => {
				// 	if (res.code == 200) {
				// 		this.mediaList[index].blogStat.likeNum = res.data
				// 	}
				// })
			},
			
			// 获取当前作品的评论数量
			getCurrentMediaCommentNum(index) {
				let mediaId = this.mediaList[index].id
				// NET.request(API.getxxxxx, {id: mediaId}, "GET")
				// .then(res => {
				// 	if (res.code == 200) {
				// 		this.mediaList[index].blogStat.commentNum = res.data
				// 	}
				// })
			},
			
			// 获取当前作品的收藏数量
			getCurrentMediaStarNum(index) {
				let mediaId = this.mediaList[index].id
				// NET.request(API.getxxxxx, {id: mediaId}, "GET")
				// .then(res => {
				// 	if (res.code == 200) {
				// 		this.mediaList[index].blogStat.starNum = res.data
				// 	}
				// })
			},
			
			// 获取当前作品的分享数量
			getCurrentMediaShareNum(index) {
				let mediaId = this.mediaList[index].id
				// NET.request(API.getxxxxx, {id: mediaId}, "GET")
				// .then(res => {
				// 	if (res.code == 200) {
				// 		this.mediaList[index].blogStat.starNum = res.data
				// 	}
				// })
			},
			
			// 监听 长按 事件
			longPress() {
				this.isShowButtonView = true
			},
			
			// 下载视频
			downLoadVideo(index) {
				this.isDownLoading = true
				let that = this
				
				let dataType = this.mediaList[index].content.type
				
				let fileList = this.mediaList[index].content.mediaList
				
				let fileUrl = fileList[0].url
					
				const downloadTask = uni.downloadFile({
					url: fileUrl, 
					success: res => {
						if (res.statusCode === 200) {
							uni.saveVideoToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: '保存成功',
										icon: 'none'
									});
								},
								fail: function() {
									uni.showToast({
										title: '保存失败，请稍后重试',
										icon: 'none'
									})
								}
							})
						}
					}
				})
						
				// 下载进度监听
				downloadTask.onProgressUpdate(res => {
					this.downLoadObj = res
				});
			},
			
			// 下载当前 swiper 中的所有图片
			downLoadAllImage(index) {
				this.isDownLoading = true
				let that = this
				
				let dataType = this.mediaList[index].content.type
				
				let fileList = this.mediaList[index].content.mediaList
				
				for (let i in fileList) {
					let fileUrl = fileList[i].url
						
					const downloadTask = uni.downloadFile({
						url: fileUrl, 
						success: res => {
							if (res.statusCode === 200) {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function() {
										if (i == fileList.length - 1) {
											uni.showToast({
												title: '已保存到相册',
												icon: 'none'
											});
										}
									},
									fail: function() {
										uni.showToast({
											title: '保存失败，请稍后重试',
											icon: 'none'
										})
									}
								})
							}
						}
					})
							
					// 下载进度监听
					downloadTask.onProgressUpdate(res => {
						this.downLoadObj = res
					});
				}
			},
			
			// 下载当前图片
			downLoadCurrentImage(index) {
				this.isDownLoading = true
				let that = this
				
				let dataType = this.mediaList[index].content.type
				
				let fileList = this.mediaList[index].content.mediaList
				

				let fileUrl = fileList[this.imgIndex].url
					
				const downloadTask = uni.downloadFile({
					url: fileUrl, 
					success: res => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: '已保存到相册',
										icon: 'none'
									});
								},
								fail: function() {
									uni.showToast({
										title: '保存失败，请稍后重试',
										icon: 'none'
									})
								}
							})
						}
					}
				})
						
				// 下载进度监听
				downloadTask.onProgressUpdate(res => {
					this.downLoadObj = res
				});
			},
			
			// 监听图片滑动
			changeImageSwiper(e) {
				this.imgIndex = e.detail.current
			},
			
			// 获取分类
			async getProductData(id) {
				if (id) {
					let that = this
					NET.request(`https://hxyc.dayaar.com.cn/pro/api/salesapp/shop/product/${id}`, 'GET')
					// NET.request(API.getProductDataById, {id}, 'GET')
					.then(res => {
						if (res.code === 200) {
							that.productData = res.data
						}
					})
					.catch(err => {
						uni.showToast({
							title: '获取失败！',
							icon: 'error'
						})					
					})
				} else {
					uni.showToast({
						title: 'ProductId 无效！',
						icon: 'error'
					})		
					this.productData = {}
				}
			},
			
			// 禁止 swiper 滑动
			stopSwiper() {
				return true
			},
			
			// 点击视频 （播放 / 暂停）
			handleClickSwiper(index) {
				this.isShowButtonView = false
				this.isDownLoading = false
				
				this.downLoadObj = {
					progress: 0,
					totalBytesWritten: 0,
					totalBytesExpectedToWrite: 0
				}
				
				if (this.mediaList[index].content.type == 'video') {
					let id = this.mediaList[index].id +''+ index
					
					this.player = uni.createVideoContext(id, this)	
					
					if (this.isPause) {
						this.player.play()
						this.isPause = false
					} else {
						this.player.pause()
						this.isPause = true
					}
				} else if (this.mediaList[index].content.type == 'image') {
					if (this.isPause) {
						this.audio.play()
						this.isPause = false
					} else {
						this.audio.pause()
						this.isPause = true
					}
				}
			},
			
			// 点击 头像 跳转到 用户视频列表页
			goToUserVideoList(user) {
				this.player.stop()
				this.audio.pause()
				
				this.isPause = true
				
				let user_info = {
					id: user.id,
					avatar: user.avatar,
					nickname: user.nickname,
					username: user.username
				}
				
				this.goToUserPage(user_info)
			},
			
			// 关注查询
			judgeFollow(index) {
				let followToUser = this.mediaList[index].publishUser.id
				let followerId = this.user.id
				
				NET.request(API.getFollow, { followToUser, followerId }, 'GET')
				.then(res => {
					if (res.code == 200) {
						this.isFollwToUser = res.data.following
					}
				})
				.catch(err => {
					console.error('查询关注失败 : ', err)
				})
			},
			
			// 关注用户
			followUser(userId) {
				// 判断 token
				if (!this.judgeToken()) return false
				
				NET.request(API.followUser, { followToUser: userId }, 'POST')
				.then(res => {
					// 改变 关注 icon 
					this.isFollwToUser = true

					uni.showToast({
						title: '已关注！',
						icon: 'success'
					})
				})
				.catch(err => {
					console.error('关注失败！', err)
					
					uni.showToast({
						title: '关注失败！',
						icon: 'error'
					})
				})
			},
			
			// 取消关注
			unFollowUser(userId) {
				NET.request(API.unFollowUser, { followToUser: userId }, 'POST')
				.then(res => {
					// 改变 关注 icon
					this.isFollwToUser = false

					uni.showToast({
						title: '已取消关注！',
						icon: 'success'
					})
				})
				.catch(err => {
					console.error('取消关注失败！', err)
					
					uni.showToast({
						title: '取消关注失败！',
						icon: 'error'
					})
				})
			},
			
			// 点击 点赞图标
			handleClickDianZan(index) {
				// 判断 token
				if (!this.judgeToken()) return false
				
				// 判断用户是否点赞过
				if (this.mediaList[index].userConf == null) {
					this.mediaList[index].userConf = {}
					this.dianZan = true
					this.mediaList[index].userConf.like = 1
					this.mediaList[index].userConf.star = 0
					this.mediaList[index].blogStat.likeNum ++
				} else if (this.mediaList[index].userConf.like == 1) {
					this.dianZan = false
					this.mediaList[index].userConf.like = 0
					this.mediaList[index].blogStat.likeNum --
				} else if (this.mediaList[index].userConf.like == 0) {
					this.dianZan = true
					this.mediaList[index].userConf.like = 1
					this.mediaList[index].blogStat.likeNum ++
				}
				
				let params = {
					blogId: this.mediaList[index].id,
					like: this.dianZan
				}
				NET.request(API.likeBlog, params, 'POST')
			},
			
			// 点击 收藏图标
			handleClickShouCang(index) {
				// 判断 token
				if (!this.judgeToken()) return false
				
				// 判断用户是否收藏过
				if (this.mediaList[index].userConf == null) {
					this.mediaList[index].userConf = {}
					this.shouCang = true
					this.mediaList[index].userConf.like = 0
					this.mediaList[index].userConf.star = 1
					this.mediaList[index].blogStat.starNum ++
				} else if (this.mediaList[index].userConf.star == 1) {
					this.shouCang = false
					this.mediaList[index].userConf.star = 0
					this.mediaList[index].blogStat.starNum --
				} else if (this.mediaList[index].userConf.star == 0) {
					this.shouCang = true
					this.mediaList[index].userConf.star = 1
					this.mediaList[index].blogStat.starNum ++
				}
				
				let params = {
					blogId: this.mediaList[index].id,
					star: this.shouCang
				}
				NET.request(API.shouCangBlog, params, 'POST')
			},
			
			// 点击 转发图标
			handleClickZhuanFa(index) {
				this.zhuanFa = !this.zhuanFa
			},
			
			// 点击 评论图标
			handleClickPingLun(index) {
				// 显示评论信息
				this.isShowPingLun = true
				this.isHidePingLun = false
				
				let blogId = this.mediaList[index].id
				
				// 获取当前视频的评论列表
				this.getCommentListByBlogId(blogId)
			},
			
			// 提交评论
			submitComment(index) {	
				// 判断 token
				if (!this.judgeToken()) return false
				
				let params = {
					blogId: this.mediaList[index].id,
					content: this.commentText,
					createBy: '',
					createTime: this.currentTime,
					quote: {},
					remarks: "xxxxx",
					updateBy: "xxxxxxx",
					updateTime: this.currentTime,
					user: {}
				}
				
				// 如果是 回复 评论
				if (this.submitType == 'replyComment') {
					let refer_to_id = this.commentList[this.replyCommentIndex].id
					params.referToId = refer_to_id
				}
				
				NET.request2(API.commentBlog, params, 'POST')
				.then(res => {
					console.log('提交评论 : ', res)
					
					if (res.code == 200) {
						this.submitType = 'addComment'
						uni.showToast({ title: '提交成功！', icon: 'success' })
						this.commentText = ''
						
						// 重新获取评论
						this.getCommentListByBlogId(this.mediaList[index].id)
					}
				})
				.catch(err => {
					console.error('提交评论失败 : ', err)
				})
			},
			
			// 点击评论用户的头像
			handleClickPingLunAvatar(index) {
				this.player.stop()
				
				if (this.audio && this.audio.src) {
					this.audio.pause()
				}
				
				this.isPause = true
				
				let user_info = {
					id: this.commentList[index].user.id,
					avatar: this.commentList[index].user.avatar,
					nickname: this.commentList[index].user.nickname,
					username: this.commentList[index].user.username
				}
				
				this.goToUserPage(user_info)
			},
			
			// 跳转到用户详情页时传递参数
			goToUserPage(userInfo) {
				uni.navigateTo({
					url: `/subcontract/person-center/person-center?id=${userInfo.id}&avatar=${userInfo.avatar}&nickname=${userInfo.nickname}&username=${userInfo.username}`,
				})
			},
			
			// 点击 评论 item (引用评论)
			handleClickCommentItem(index) {
				this.submitType = 'replyComment'
				this.replyCommentIndex = index
				this.commentInputPlaceholder = '回复 @' + this.commentList[index].user.nickname + ':'
			},
			
			// 删除评论
			deleteComment(id) {
				NET.request(`http://192.168.0.87:8000/api/salesapp/blog/userComment/remove/${id}`, 'DELETE')
				.then(res => {
					if (res.code == 200) {
						uni.showToast({ title: '删除成功！', icon: 'success' })
						
						// 重新获取 评论列表
						this.getCommentListByBlogId(this.mediaList[index].id)
					}
				})
				.catch(err => {
					console.error('删除评论失败 : ', err)
				})
			},
			
			// 点击评论页面视频
			handleClickPingLunVideo() {
				if (this.isPause) {
					this.player.play()
					this.isPause = false
				} else {
					this.player.pause()
					this.isPause = true
				}
			},
			
			// 点赞评论
			dianZanPingLun(index) {
				// 判断 token
				if (!this.judgeToken()) return false
				
			},
			
			// 隐藏评论
			hidePingLun() {
				this.isShowPingLun = false
				this.isHidePingLun = true
			},
			
			// 监听滚动到评论底部
			scrollToLower() {
				uni.showToast({
					icon: 'none',
					title: '已经到底了!'
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	image {  }
	.img_type_1 { width: 80%; height: 100%; position: absolute; left: 50%; transform: translateX(-50%); }
	// img swiper 隐藏评论时显示
	.img_type_2 { width: 100%; height: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
	
	.c_height_40 {
		width: auto;  
		position:relative;
		animation: animate1 0.4s 1;
		-webkit-animation: animate1 0.4s 1; /*Safari and Chrome*/
		animation-fill-mode:forwards;
		-webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */
	}	
	@keyframes animate1 {
	  to {height: 40%;}
	  from {height: 100%;}
	}
	
	@-webkit-keyframes animate1 {
		to {height: 40%;}
		from {height: 100%;}
	}
	
	.c_height_100 {
		width: auto;
		position:relative;
		animation: animate2 0.4s 1;
		-webkit-animation: animate2 0.4s 1; /*Safari and Chrome*/
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards; /* Safari 和 Chrome */
	}
	@keyframes animate2 {
	  to {height: 100%;}
	  from {height: 40%;}
	}
	
	@-webkit-keyframes animate2 {
		to {height: 100%;}
		from {height: 40%;}
	}
	
	.uni-margin-wrap {
		width: 100%;
		height: 100%;
		// border: 1rpx solid red;
	}
	.swiper {
		height: 100%;
	}
	.swiper-item {
		display: block;
		width: 100%;
		height: 100%;
		position: relative;
		
		.video_play_box {
			width: 100%;
			height: 100%;
			position: relative;
			
			.myVideo { width: 100%; height: 100%; }
			
			.img_swiper_box {
				width: 100%; height: 100%; 
				.image_swiper {
					width: 100%; height: 100%; 
					
					swiper-item { 
						width: 100%; 
						height: 100%; 
						position: relative;
						background: #000;
					}
				}
			}
			
			.pause_icon_box {
				.pause_icon { }
			}
			
			.pause_icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
		}
		
		.vedio_left_box {
			// display: none;
			width: 150rpx;
			height: calc(100% - 200rpx);
			// border: 1rpx solid blue;
			position: absolute;
			left: 20rpx;
			top: 40rpx;
			
			// 用户信息 div
			.user_box {
				width: 100%;
				height: 40%;
				position: relative;
				// background-color: #fff;
				border-radius: 10rpx;
				
				.name, .mai_niu, .addr { 
					writing-mode: vertical-lr; 
					font-family: mn;
					position: absolute;
					top: 20rpx; 
					font-size: 30rpx;
				}
				.name {
					left: 20rpx;
				}
				.mai_niu {
					left: 60rpx;
				}
				.addr {
					left: 100rpx;
					font-size: 30rpx;
				}
			}
		
			// 商品信息 div
			.pro_info_box {
				padding: 20rpx;
				height: 60%;
				// border: 1rpx solid red;
				position: relative;
				box-sizing: border-box;
				
				.pro_info {
					height: 100%;
					padding: 8rpx 4rpx;
					background-color: #fff;
					border-radius: 12rpx;
					box-sizing: border-box;
					
					.image_box {
						width: 100rpx;
						height: 100rpx;
						padding: 4rpx;
						box-sizing: border-box;
						
						image { width: 100%; height: 100%; border-radius: 12rpx; }
					}
					
					.info_box {
						padding: 20rpx;
						height: 100%;
						position: relative;
						box-sizing: border-box;
						margin-top: 10rpx;
						
						.category, .price__data {
							position: absolute;
							top: 0;
							writing-mode: vertical-lr;
							font-family: mn;  -webkit-font-family: mn;
						}
						.category {
							font-size: 28rpx;
							font-weight: bold;
							left: 12rpx;
						}
						.price__data { 
							font-size: 28rpx; 
							left: 56rpx;
							 
							.price { color: #ff3c20; margin-bottom: 10rpx; }
						}
					}
				}
			}
		}
	
		.vedio_right_box {
			width: 100rpx;
			height: 50%;
			position: absolute;
			top: 38%;
			right: 20rpx;
			// border: 1rpx solid red;
			
			.avatar_box {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				border: 2rpx solid #fff;
				box-sizing: border-box;
				position: relative;
				
				image { width: 100%; height: 100%; border-radius: 50%; }
				
				.guan_zhu_icon, .yi_guan_zhu_icon {
					position: absolute;
					bottom: -16rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
			
			.menu {
				width: 100%;
				height: calc(100% - 120rpx);
				margin-top: 60rpx;
				
				.item_box {
					width: 100%;
					text-align: center;
					
					.item_icon_box {
						width: 100%;
						height: calc(100% - 20rpx);
						margin-top: 20rpx;
						text-align: center;
						box-sizing: border-box;
						// border: 1rpx solid #f00;
						
						.share_btn {
							width: 60rpx;
							height: 60rpx;
							background: none !important;
							text-align: center;
							line-height: 60rpx !important;
							font-size: 60rpx !important;
							padding-left: 0 !important;
							padding-right: 0 !important;
							
							i { font-size: 56rpx !important; }
						}
						.share_btn::after { border: none !important; }
					}
					.item_value {
						position: relative;
						top: -8rpx;
						font-size: 24rpx;
						color: #eee;
					}
					
					.visit_num {
						top: -20rpx !important;
					}
				}
			}
		}
	
		.ping_lun_box {
			width: 100%;
			height: 60%;
			box-sizing: border-box;
			background-color: #fff;
			border-top-left-radius: 12rpx;
			border-top-right-radius: 12rpx;
			position: relative;
			overflow-y: auto;
			padding-bottom: 70rpx;
			
			.hide_icon_box {
				width: 60rpx; height: 60rpx; position: absolute; top: 6rpx; left: 6rpx;
				// image{ width: 100%; height: 100%; }
			}
			
			.ping_lun_total {
				width: 100%;
				text-align: center;
				padding: 10rpx 0;
				box-sizing: border-box;
				position: relative;
				
				.hide_icon {
					position: absolute;
					top: 0;
					right: 20rpx;
					// transform: translateX(-50%);
				}
			}
		
			.scroll-Y { 
				height: calc(100% - 70rpx);

				.ping_lun_item {
					width: 100%;
					height: 80rpx;
					position: relative;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					// border: 1rpx solid red;
					
					.ping_lun_avatar_box {
						width: 80rpx;
						height: 80rpx;
						position: absolute;
						top: 16rpx;
						left: 10rpx;
						padding: 10rpx;
						box-sizing: border-box;
						border-radius: 50%;
						
						image { width: 100%; height: 100%; border-radius: 50%; }
					}
					
					.ping_lun_info {
						width: calc(100% - 200rpx);
						height: 90%;
						position: absolute;
						top: 5rpx;
						left: 90rpx;
						// border: 1rpx solid #f00;
						
						.ping_lun_name { font-size: 20rpx };
						.ping_lun_content { font-size: 24rpx };
						.ping_lun_time { margin-left: 60rpx; font-size: 20rpx };
					}
					
					.ping_lun_dian_zan_box {
						width: 60rpx;
						height: 60rpx;
						position: absolute;
						top: 20rpx;
						right: 80rpx;
					}
					
					.ping_lun_del_box {
						width: 60rpx;
						height: 60rpx;
						position: absolute;
						top: 24rpx;
						right: 20rpx;
					}
				}
			}
			
			.sub_ping_lun {
				width: 96%;
				height: 70rpx;
				margin: 0 auto;
				box-sizing: border-box;
				border-radius: 6rpx;
				border: 2rpx solid #eee;
				position: fixed;
				bottom: 5rpx;
				left: 15rpx;
				padding: 10rpx;
				box-sizing: border-box;
				
				.input_ping_lun {
					width: 85%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 10rpx;
					
					input { width: 100%; height: 100%; padding: 0 10rpx; }
				}
				
				.sub_btn {
					width: 9%;
					height: 100%;
					text-align: center;
					position: absolute;
					top: 0;
					right: 0;
					display: flex;
					align-items: center;
					color: #1c9aa0;
					z-index: 9;
				}
			}
		}
	
		.button_view_box {
			width: 100%;
			height: 40%;
			position: absolute;
			padding: 20rpx;
			bottom: 0;
			background-color: #fff;
			border-top-left-radius: 10rpx;
			border-top-right-radius: 10rpx;
		}
	}
</style>